<template>
  <div>
    <!--title-->
    <div class="content-title" ref="title">
      <div class="su-title">
        <i class="el-icon-tickets"> </i>
        <span>客户管理</span>
      </div>
      <div class="batch-but-css">
        <el-button type="success" icon="el-icon-setting el-icon--left" @click="setApprovalTemplateClick">设置审批模板</el-button>
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="titleAddClick">新增供应商</el-button>
        <el-button type="danger" icon="el-icon-refresh el-icon--left" @click="tabsOrTableDialogEmpty">清空设置</el-button>
      </div>
    </div>

    <!--tabs-->
    <div class="common-tabs" ref="tabs">
      <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
        <el-tab-pane name="" label="全部"/>
        <el-tab-pane name="1" label="正常"/>
        <el-tab-pane name="2" label="停用"/>
      </el-tabs>
      <!--tabs 高级搜索-->
      <div class="common-tabs-right">
        <div class="common-tabs-right-search">
          <el-button type="info" @click="tabsProp.SearchDropDown=!tabsProp.SearchDropDown">
            高级搜索
            <i :class="[tabsProp.SearchDropDown?'el-icon-bottom':'el-icon-top','el-icon--right']"></i>
          </el-button>
        </div>
      </div>
      <!--tabs 搜索下拉的值-->
      <el-collapse-transition v-if="tabsProp.SearchDropDown">
        <ul class="common-tabs-from" ref="commonTabsFrom">
          <li v-if="Utils.tabsShowOrder('企业名称',toConfigureFieldDialog.tabsProp).checkbox" :style="{order:Utils.tabsShowOrder('企业名称',toConfigureFieldDialog.tabsProp).order}">
            <span>企业名称</span>
            <el-input placeholder="请输入企业名称" v-model="tabsSearchData.clientName" clearable/>
          </li>
          <li v-if="Utils.tabsShowOrder('供应商类型',toConfigureFieldDialog.tabsProp).checkbox" :style="{order:Utils.tabsShowOrder('供应商类型',toConfigureFieldDialog.tabsProp).order}">
            <span>供应商类型</span>
            <el-radio-group v-model="tabsSearchData.clientType">
              <el-radio v-for="(item,key) in tabsSearchOption.clientTypeOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </li>
          <li v-if="Utils.tabsShowOrder('审核状态',toConfigureFieldDialog.tabsProp).checkbox" :style="{order:Utils.tabsShowOrder('审核状态',toConfigureFieldDialog.tabsProp).order}">
            <span>审核状态</span>
            <el-radio-group v-model="tabsSearchData.clientStatus">
              <el-radio v-for="(item,key) in tabsSearchOption.clientStatusOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </li>
          <li v-for="index in tabsProp.liHtmlNum" :key="index+1000" style="order:888"></li>
          <li class="common-tabs-from-but" style="order:999">
            <el-button icon="el-icon-setting" circle @click="tabsOrTableSetClick('tabsProp','筛选项配置')"/>
            <el-button icon="el-icon-refresh el-icon--left" @click="tabsSearchReset">重置</el-button>
            <el-button icon="el-icon-search el-icon--left" type="primary" @click="tabsSearchDetermine">查询</el-button>
          </li>
        </ul>
      </el-collapse-transition>
    </div>

    <!--table-->
    <template>
      <!--表格前的按钮-->
      <div class="common-table-title-but" ref="tableTopBut">
        <el-button icon="el-icon-setting el-icon--left" @click="tabsOrTableSetClick('tableProp','筛表头配置')">配置表头</el-button>
      </div>
      <!--表格内容-->
      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="tableProp.tableHeight"
          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
          v-loading="tableProp.loading"
          @selection-change="tableSelectionChange"
          class="cc-table-style"
      >
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="企业名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientName"
                         v-if="Utils.tableShowFixed('企业名称',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('企业名称',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="供应商类型" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientType"
                         v-if="Utils.tableShowFixed('供应商类型',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('供应商类型',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.clientTypeOption">
              <template v-if="scope.row.clientType==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="负责人" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientLeader"
                         v-if="Utils.tableShowFixed('负责人',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('负责人',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="联系方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientContact"
                         v-if="Utils.tableShowFixed('联系方式',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('联系方式',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="授信额度" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientQuota"
                         v-if="Utils.tableShowFixed('授信额度',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('授信额度',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="已使用额度" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientUsedQuota"
                         v-if="Utils.tableShowFixed('已使用额度',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('已使用额度',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="可用额度" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientUnusedQuota"
                         v-if="Utils.tableShowFixed('可用额度',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('可用额度',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="审核状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientStatus"
                         v-if="Utils.tableShowFixed('审核状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('审核状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.clientStatusOption">
              <template v-if="scope.row.clientStatus==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否信用评价" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientEvaluateType"
                         v-if="Utils.tableShowFixed('是否信用评价',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('是否信用评价',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.clientEvaluateTypeOption">
              <template v-if="scope.row.clientEvaluateType==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="status"
                         v-if="Utils.tableShowFixed('状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.statusOption">
              <template v-if="scope.row.status==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="修改者" min-width="150" :show-overflow-tooltip="true" align="center" prop="updateBy"
                         v-if="Utils.tableShowFixed('修改者',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('修改者',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="更新时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="updateTime"
                         v-if="Utils.tableShowFixed('更新时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('更新时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="创建者" min-width="150" :show-overflow-tooltip="true" align="center" prop="createBy"
                         v-if="Utils.tableShowFixed('创建者',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('创建者',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="创建时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="createTime"
                         v-if="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('创建时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="客户基本情况" min-width="150" :show-overflow-tooltip="true" align="center" prop="remark"
                         v-if="Utils.tableShowFixed('客户基本情况',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('客户基本情况',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="操作" width="310" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看/编辑</el-button>
            <el-button type="success" icon="el-icon-check el-icon--left" @click="toExamineClick(scope.row)" v-if="scope.row.clientReviewStatus==1 && scope.row.clientStatus!=1">审核</el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableDelClick(scope.row,0)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="common-pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="paginationProp.currentPage"
            :page-sizes="[10, 20, 50, 100,500,1000]"
            :page-size="paginationProp.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="paginationProp.total"
        />
      </div>
    </template>

    <!--抽屉增加和修改-->
    <el-drawer
        :title="drawerProp.title"
        :visible.sync="drawerProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        custom-class="common-drawer"
        size="1050px"
    >
      <div class="common-drawer-content" v-loading="drawerProp.loading">
        <div class="parent">
          <!--左边-->
          <div class="leftChild">
            <ul class="content">
              <li :class="[drawerProp.active===0?'active':'']" @click="drawerActiveClick(0)" v-if="[1,2, 3,4].includes(butStatus)">基础设置</li>
              <li :class="[drawerProp.active===1?'active':'']" @click="drawerActiveClick(1)" v-if="[2, 3,4].includes(butStatus)">信用风险评价</li>
              <li :class="[drawerProp.active===2?'active':'']" @click="drawerActiveClick(2)" v-if="[3,4].includes(butStatus) && formData.configEvaluateTemplateTitleList.length!=0">
                评价结果
              </li>
              <li :class="[drawerProp.active===3?'active':'']" @click="drawerActiveClick(3)" v-if="[3,4].includes(butStatus) && formData.configEvaluateTemplateTitleList.length!=0">
                审批信息
              </li>
            </ul>
          </div>
          <!--右边-->
          <div class="rightChild">
            <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange" :style="{'height': drawerProp.rightProp.height+'px'}">
              <!--基本设置-->
              <li class="content-main" ref="drawerLi0" v-show="[1,2, 3,4].includes(butStatus)">
                <div class="title">
                  <span></span>
                  <label>基础设置</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                    <div class="n" @click="drawerEdit(0)">
                      <i class="el-icon-edit"></i>
                      编辑基础设置
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && [2,3,4].includes(butStatus)">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">企业名称</span>
                      {{ formData.clientName }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">供应商类型</span>
                      <template v-for="item in formDataOption.clientTypeOption">
                        <template v-if="formData.clientType==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">负责人</span>
                      {{ formData.clientLeader }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">联系方式</span>
                      {{ formData.clientContact }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">授信额度</span>
                      {{ formData.clientQuota }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">已使用额度</span>
                      {{ formData.clientUsedQuota }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">可用额度</span>
                      {{ formData.clientUnusedQuota }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">审核状态</span>
                      <template v-for="item in formDataOption.clientStatusOption">
                        <template v-if="formData.clientStatus==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">是否信用评价</span>
                      <template v-for="item in formDataOption.clientEvaluateTypeOption">
                        <template v-if="formData.clientEvaluateType==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">状态</span>
                      <template v-for="item in formDataOption.statusOption">
                        <template v-if="formData.status==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">修改者</span>
                      {{ formData.updateBy }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">更新时间</span>
                      {{ formData.updateTime }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">创建者</span>
                      {{ formData.createBy }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">创建时间</span>
                      {{ formData.createTime }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">评价指标模板</span>
                      <template v-for="item in formDataOption.clientEvaluateTemplateIdOption1">
                        <template v-if="formData.clientEvaluateTemplateId==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">客户基本情况</span>
                      {{ formData.remark }}
                    </li>
                  </ul>
                </div>
                <!--<div class="edit" v-if="(drawerProp.status==='edit' || drawerProp.status==='add') && [1].includes(butStatus)">-->
                <div class="edit" v-if="(drawerProp.status==='edit' && [1].includes(butStatus)) || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">
                    <el-form-item label="企业名称" prop="clientName" class="common-drawer-edit-li " :rules="[]">
                      <el-input placeholder="请输入企业名称" v-model="formData.clientName" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="供应商类型" prop="clientType" class="common-drawer-edit-li " :rules="[]">
                      <el-radio-group v-model="formData.clientType" :disabled="false">
                        <el-radio v-for="(item,key) in formDataOption.clientTypeOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="负责人" prop="clientLeader" class="common-drawer-edit-li " :rules="[]">
                      <el-input placeholder="请输入负责人" v-model="formData.clientLeader" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="clientContact" class="common-drawer-edit-li " :rules="[]">
                      <el-input placeholder="请输入联系方式" v-model="formData.clientContact" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="是否信用评价" prop="clientEvaluateType" class="common-drawer-edit-li " :rules="[]">
                      <el-radio-group v-model="formData.clientEvaluateType" :disabled="false">
                        <el-radio v-for="(item,key) in formDataOption.clientEvaluateTypeOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态" prop="status" class="common-drawer-edit-li " :rules="[]">
                      <el-radio-group v-model="formData.status" :disabled="false">
                        <el-radio v-for="(item,key) in formDataOption.statusOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="评价指标模板" prop="clientEvaluateTemplateId" class="common-drawer-edit-li " :rules="[]">
                      <el-select placeholder="请选择评价指标模板" v-model="formData.clientEvaluateTemplateId" filterable clearable :disabled="false">
                        <el-option v-for="item in formDataOption.clientEvaluateTemplateIdOption" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="客户基本情况" prop="remark" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入客户基本情况" type="textarea" v-model="formData.remark" :disabled="false" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300"
                                show-word-limit/>
                    </el-form-item>
                  </el-form>
                </div>
              </li>
              <!--信用风险评价-->
              <li class="content-main" ref="drawerLi1" v-show="[2, 3,4].includes(butStatus)">
                <div class="title">
                  <span></span>
                  <label>信用风险评价</label>
                  <div class="s"></div>
                  <!--&& formData.configEvaluateTemplateTitleList.length==0"-->
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut && formData.configEvaluateTemplateTitleList.length==0">
                    <div class="n" @click="drawerEdit(1)">
                      <i class="el-icon-edit"></i>
                      编辑信用风险评价
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && [3,4].includes(butStatus)">
                  <div style="text-align: center" v-if="formData.configEvaluateTemplateTitleList.length==0">还没有信用风险评价请先评价</div>
                  <div v-else>
                    <el-form :model="formData" class="creditRiskAssessment-css">
                      <div v-for="(item,key) in formData.configEvaluateTemplateTitleList" :key="key" class="creditRiskAssessment-css-content">
                        <div class="title">{{ key + 1 }}、{{ item.templateTitile }}</div>
                        <el-form-item
                            class="option-item"
                            :prop="`configEvaluateTemplateTitleList.${key}.templateChooseId`"
                            :rules="[{ required: true, message: '请选择得分', trigger: 'change' }]"
                        >
                          <el-radio-group v-model="item.templateChooseId" :disabled="true">
                            <el-radio v-for="(item1,key1) in item.configEvaluateTemplateChooseList" :key="key1" :label="item1.templateChooseId">【{{ item1.templateChoosePoints }}】
                              {{ item1.templateChooseName }}
                            </el-radio>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item :prop="`configEvaluateTemplateTitleList.${key}.scoreDescription`">
                          <el-input placeholder="请输入得分说明" type="textarea" v-model="item.scoreDescription" :disabled="true" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300"
                                    show-word-limit/>
                        </el-form-item>
                      </div>
                    </el-form>

                  </div>
                </div>
                <div class="edit" v-if="drawerProp.status==='edit' && [2].includes(butStatus)">
                  <el-form :model="formData" ref="drawerFrom1" class="creditRiskAssessment-css">
                    <div v-for="(item,key) in formData.configEvaluateTemplateTitleList" :key="key" class="creditRiskAssessment-css-content">
                      <div class="title">{{ key + 1 }}、{{ item.templateTitile }}</div>
                      <el-form-item
                          class="option-item"
                          :prop="`configEvaluateTemplateTitleList.${key}.templateChooseId`"
                          :rules="[{ required: true, message: '请选择得分', trigger: 'change' }]"
                      >
                        <el-radio-group v-model="item.templateChooseId" :disabled="false">
                          <el-radio v-for="(item1,key1) in item.configEvaluateTemplateChooseList" :key="key1" :label="item1.templateChooseId">【{{ item1.templateChoosePoints }}】
                            {{ item1.templateChooseName }}
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item :prop="`configEvaluateTemplateTitleList.${key}.scoreDescription`">
                        <el-input placeholder="请输入得分说明" type="textarea" v-model="item.scoreDescription" :disabled="false" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300"
                                  show-word-limit/>
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </li>
              <!--评价结果-->
              <li class="content-main" ref="drawerLi2" v-show="[3,4].includes(butStatus) && formData.configEvaluateTemplateTitleList.length!=0">
                <div class="title">
                  <span></span>
                  <label>评价结果</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                    <div class="n" @click="drawerEdit(2)">
                      <i class="el-icon-edit"></i>
                      编辑评价结果
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && drawerProp.status!=='edit'">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">风险评级总得分</span>
                      {{ formData.clientInfoEvaluateResultsDto.clientResultsCreditRiskScore }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">客户类别</span>
                      <template v-for="item in formDataOption.clientResultsClientCategoryOption">
                        <template v-if="formData.clientInfoEvaluateResultsDto.clientResultsClientCategory==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">评价折算系数</span>
                      {{ formData.clientInfoEvaluateResultsDto.clientResultsConversionCoefficient }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">客户净资产规模</span>
                      {{ formData.clientInfoEvaluateResultsDto.clientResultsNetAssetSize }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">信用额度上限</span>
                      {{ formData.clientInfoEvaluateResultsDto.clientResultsCreditLimit }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">申请额度</span>
                      {{ formData.clientInfoEvaluateResultsDto.clientResultsCreditApply }}
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom2" class="common-drawer-edit">
                    <el-form-item label="风险评级总得分" prop="clientInfoEvaluateResultsDto" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入风险评级总得分" v-model="formData.clientInfoEvaluateResultsDto.clientResultsCreditRiskScore" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="客户类别" prop="a5" class="common-drawer-edit-li li2" :rules="[]">
                      <el-select placeholder="请选择客户类别" v-model="formData.clientInfoEvaluateResultsDto.clientResultsClientCategory" filterable clearable :disabled="false">
                        <el-option v-for="item in formDataOption.clientResultsClientCategoryOption" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="评价折算系数" prop="clientResultsConversionCoefficient" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入评价折算系数" v-model="formData.clientInfoEvaluateResultsDto.clientResultsConversionCoefficient" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="客户净资产规模" prop="clientResultsNetAssetSize" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入客户净资产规模" v-model="formData.clientInfoEvaluateResultsDto.clientResultsNetAssetSize" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="信用额度上限" prop="clientResultsNetAssetSize" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入信用额度上限" v-model="formData.clientInfoEvaluateResultsDto.clientResultsCreditLimit" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="申请额度" prop="clientResultsCreditApply" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入申请额度" v-model="formData.clientInfoEvaluateResultsDto.clientResultsCreditApply" :disabled="false" clearable/>
                    </el-form-item>
                  </el-form>
                </div>
              </li>
              <!--审批信息-->
              <li class="content-main" ref="drawerLi3" v-show="[3,4].includes(butStatus) && formData.configEvaluateTemplateTitleList.length!=0">
                <div class="title">
                  <span></span>
                  <label>审批信息</label>
                  <div class="s"></div>
                </div>
                <!--查看-->
                <div class="see">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li li2">
                      <el-table
                          ref="table"
                          :data="formData.clientResultsCheckTemplateDto"
                          border
                          style="width: 100%"
                          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                          class="cc-table-style"
                      >
                        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
                        <el-table-column label="姓名" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientCheckUserRealname"/>
                        <el-table-column label="审核权限" min-width="150" :show-overflow-tooltip="true" align="center" prop="a3">
                          <template slot-scope="scope">
                            <template v-for="item in formDataOption.checkUserPermiOption">
                              <template v-if="scope.row.clientCheckUserPermi==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                          </template>
                        </el-table-column>
                        <el-table-column label="审核状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientCheckStatus">
                          <template slot-scope="scope">
                            <template v-for="item in formDataOption.clientCheckStatusOption">
                              <template v-if="scope.row.clientCheckStatus==item.value">
                                {{ item.label }}
                              </template>
                            </template>
                          </template>
                        </el-table-column>
                        <el-table-column label="审核意见" min-width="150" :show-overflow-tooltip="true" align="center" prop="clientCheckRemark"/>
                      </el-table>
                    </li>
                  </ul>
                </div>
                <!--<div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">-->
                <!--  <el-form :model="formData" ref="drawerFrom3" class="common-drawer-edit">-->
                <!--    <el-form-item label="审批信息" prop="clientResultsCheckTemplateDto" class="common-drawer-edit-li li2"-->
                <!--                  :rules="[{ required: true, message: '请输入审批信息', trigger: 'blur' }]">-->
                <!--      <el-input placeholder="请输入审批信息" v-model="formData.clientResultsCheckTemplateDto" :disabled="false" clearable/>-->
                <!--    </el-form-item>-->
                <!--  </el-form>-->
                <!--</div>-->
              </li>
            </ul>
          </div>
        </div>
        <!--操作按钮-->
        <template>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerProp.isDrawer=false">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('add')">保 存</el-button>
          </div>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('edit')">保 存</el-button>
          </div>
        </template>
      </div>
    </el-drawer>
    <!--dialog 集合-->


    <!--tabs和table dialog 字段选择显示问题-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div class="toConfigure-field-dialog-content" v-loading="toConfigureFieldDialog.loading">
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2" v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label" placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close" @click="tabsOrTableClose(item,key)" v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button type="danger" @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)" icon="el-icon-delete el-icon--left">还原初始化</el-button>
        <el-button @click="tabsOrTableCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="tabsOrTableDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>

    <!--设置审批模板-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        title="设置审批模板"
        :visible.sync="setApprovalTemplateData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="setApprovalTemplateDataCancel"
        width="500px"
    >
      <el-form :model="setApprovalTemplateData" ref="setApprovalTemplateData" class="common-drawer-edit">
        <el-form-item label="审批模板" prop="checkTemplateId" class="common-drawer-edit-li li2" :rules="[{ required: true, message: '请选择审批模板', trigger: 'change' }]">
          <el-select placeholder="请选择审批模板" v-model="setApprovalTemplateData.checkTemplateId" filterable clearable :disabled="false">
            <el-option v-for="item in checkTemplateIdOption" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button @click="setApprovalTemplateDataCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="setApprovalTemplateDataDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>


    <!--审核-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        title="审核"
        :visible.sync="toExamineData.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="toExamineDataCancel"
        width="500px"
    >
      <el-form :model="toExamineData" ref="toExamineData" class="common-drawer-edit">
        <el-form-item label="审核意见" prop="clientCheckRemark" class="common-drawer-edit-li li2">
          <el-input placeholder="请输入审核意见" type="textarea" v-model="toExamineData.clientCheckRemark" :disabled="false" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300" show-word-limit/>
        </el-form-item>
        <el-form-item label="审核状态" prop="clientCheckStatus" class="common-drawer-edit-li li2" :rules="[{ required: true, message: '请选择审核状态', trigger: 'change' }]">
          <el-radio-group v-model="toExamineData.clientCheckStatus" :disabled="false">
            <el-radio v-for="(item,key) in clientCheckStatusOption" :key="key" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button @click="toExamineDataCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="toExamineDataDataDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'navigation3',
  components: {draggable},
  props: [],
  data() {
    return {

      //设置审批模板
      setApprovalTemplateData: {
        id:'',
        checkTemplateId: '',
        checkTemplateClientType: 2,//1客户 2供应商
        isDialog: false
      },
      // 审批模板下拉
      checkTemplateIdOption: [],

      toExamineData:{
        isDialog:false,
        clientCheckRemark:'',//审核意见
        clientCheckStatus:'1',//审核状态  1-审核通过，2-审核不通过，3-待审核
      },
      clientCheckStatusOption: [
        {label: '审核通过', value: '1'},
        {label: '审核不通过', value: '2'},
      ],

      //接口名称
      apiProp: {
        tableInit: 'navigation3List',//表格初始化
        tableAddEdit: 'navigation3AddEdit',//表格增加和编辑接口
        tableDel: 'navigation3Del',//表格删除接口
        tableQuery: 'navigation3Query',//表格查一条接口
        tableBatchDel: 'navigation3BatchDel',//批量删除接口
        tabsOrTableId: 2,//设置搜索条件和表头id
        selectApiBoolean: false,//比初始化接口先运行的接口是否先运行完成
      },
      headersData: {token: window.localStorage.getItem('token')},//导入之类要用

      //title 配置
      titleProp: {},

      //tabs 配置
      tabsProp: {
        active: '',
        statusField: 'status',//切换的字段名
        SearchDropDown: true,//高级搜索下拉默认显示状态
        liHtmlNum: '',//有高级搜索时候差几个li
      },
      //tabs 搜索字段
      tabsSearchData: {
        clientName: '',//企业名称
        clientType: '',//供应商类型
        clientStatus: '',//审核状态
      },
      //tabs 选项
      tabsSearchOption: {
        //供应商类型 选项
        clientTypeOption: [
          {label: '全部', value: ''},
          {label: '新供应商', value: '1'},
          {label: '老供应商', value: '2'},

        ],
        //审核状态 选项
        clientStatusOption: [
          {label: '全部', value: ''},
          {label: '审核完成', value: '1'},
          {label: '审核中', value: '2'},
          {label: '待审核', value: '3'},

        ],
      },

      //table 数据
      tableData: [],
      tableProp: {
        loading: false,
        tableHeight: 0,
        tableSelectAll: [],//表格多选的值
      },
      // table 选项
      tableSearchOption: {//table 供应商类型 选项
        clientTypeOption: [
          {label: '新供应商', value: '1'},
          {label: '老供应商', value: '2'},

        ],
        //table 审核状态 选项
        clientStatusOption: [
          {label: '审核完成', value: '1'},
          {label: '审核中', value: '2'},
          {label: '待审核', value: '3'},
        ],
        //table 是否信用评价 选项
        clientEvaluateTypeOption: [
          {label: '是', value: '1'},
          {label: '否', value: '2'},

        ],
        //table 状态 选项
        statusOption: [
          {label: '正常', value: '1'},
          {label: '停用', value: '2'},

        ],
      },
      //table dialog data
      tableDialogProp: {},

      butStatus: 1,//1-新增 2-信用风险评价 3-评价结果 4-查看
      // 抽屉 值
      formData: {
        id: '',
        clientName: '',//企业名称
        clientType: '1',//供应商类型
        clientLeader: '',//负责人
        clientContact: '',//联系方式
        clientQuota: '',//授信额度
        clientUsedQuota: '',//已使用额度
        clientUnusedQuota: '',//可用额度
        clientStatus: '1',//审核状态
        clientEvaluateType: '1',//是否信用评价
        status: '1',//状态
        updateBy: '',//修改者
        updateTime: '',//更新时间
        createBy: '',//创建者
        createTime: '',//创建时间
        clientEvaluateTemplateId: '',//评价指标模板
        remark: '',//客户基本情况
        //信用风险评价
        configEvaluateTemplateTitleList: [],
        //评价结果
        clientInfoEvaluateResultsDto: {
          clientResultsCreditRiskScore: '',//风险评级总得分
          clientResultsClientCategory: '',//客户类别
          clientResultsConversionCoefficient: '',//评价折算系数
          clientResultsNetAssetSize: '',//客户净资产规模
          clientResultsCreditLimit: '',//信用额度上限
          clientResultsCreditApply: '',//申请额度
          clientResultsCheckTemplateId: '',//审批模板id
        },
        clientResultsCheckTemplateDto: [],//审批信息
      },
      // 抽屉 选项
      formDataOption: {//供应商类型 选项
        checkUserPermiOption: [
          {label: '审批', value: '1'},
          {label: '仅查看', value: '2'},
        ],

        clientCheckStatusOption: [
          {label: '通过', value: '1'},
          {label: '不通过', value: '2'},
          {label: '待审核', value: '3'},
        ],
        clientTypeOption: [
          {label: '新供应商', value: '1'},
          {label: '老供应商', value: '2'},
        ],
        //审核状态 选项
        clientStatusOption: [
          {label: '审核通过', value: '1'},
          {label: '审核不通过', value: '2'},
          {label: '待审核', value: '3'},
        ],
        //客户类别
        clientResultsClientCategoryOption: [
          {label: '客户类别1', value: '1'},
          {label: '客户类别2', value: '2'},
        ],
        //是否信用评价 选项
        clientEvaluateTypeOption: [
          {label: '是', value: '1'},
          {label: '否', value: '2'},

        ],
        //状态 选项
        statusOption: [
          {label: '正常', value: '1'},
          {label: '停用', value: '2'},

        ],
        //评价指标模板 选项
        clientEvaluateTemplateIdOption: [],

        //评价指标模板 选项 全部
        clientEvaluateTemplateIdOption1: [],
      },
      //抽屉 配置
      drawerProp: {
        isDrawer: false,
        loading: false,
        title: '',
        seeBut: true,//是否是 查看/编辑 只有查看就是false
        active: 0,//左边选择了哪个
        status: 'add',// add 新增  see 查看
        leftProp: ["基础设置", "信用风险评价", "评价结果", "审批信息",],
        rightProp: {
          height: document.documentElement.clientHeight - 90,//右边高度
        }
      },

      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //tabs和table dialog 字段选择显示
      toConfigureFieldDialog: {
        isDialog: false,
        title: '筛选项配置',
        loading: false,
        status: 'tabsProp',
        search: '',//搜索的值
        selectNum: 0,//选择的数量
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 0,//冻结后几条
        draggableProp: [],//拖拽数据
        tabsProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '企业名称', show: true, order: 0},
              {checkbox: true, label: '供应商类型', show: true, order: 0},
              {checkbox: true, label: '审核状态', show: true, order: 0},
            ]
          },
          {
            name: '信用风险评价',//标题
            show: true,//搜索是否显示
            option: []
          },
          {
            name: '评价结果',//标题
            show: true,//搜索是否显示
            option: []
          },
          {
            name: '审批信息',//标题
            show: true,//搜索是否显示
            option: []
          },
        ],
        tableProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '企业名称', show: true, order: 0},
              {checkbox: true, label: '供应商类型', show: true, order: 0},
              {checkbox: true, label: '负责人', show: true, order: 0},
              {checkbox: true, label: '联系方式', show: true, order: 0},
              {checkbox: true, label: '授信额度', show: true, order: 0},
              {checkbox: true, label: '已使用额度', show: true, order: 0},
              {checkbox: true, label: '可用额度', show: true, order: 0},
              {checkbox: true, label: '审核状态', show: true, order: 0},
              {checkbox: true, label: '是否信用评价', show: true, order: 0},
              {checkbox: true, label: '状态', show: true, order: 0},
              {checkbox: true, label: '修改者', show: true, order: 0},
              {checkbox: true, label: '更新时间', show: true, order: 0},
              {checkbox: true, label: '创建者', show: true, order: 0},
              {checkbox: true, label: '创建时间', show: true, order: 0},
              {checkbox: true, label: '客户基本情况', show: true, order: 0},
            ]
          },
        ]
      }
    };
  },
  activated() {
    //抽屉 基础设置 评价指标模板 选项
    this.$navigation1All({status: 1}).then((result) => {

      this.formDataOption.clientEvaluateTemplateIdOption = result.map(item => ({
        label: item.templateName,
        value: item.id
      }));

      this.formDataOption.clientEvaluateTemplateIdOption1 = result.map(item => ({
        label: item.templateName,
        value: item.id
      }));
    })

    //审批模板下拉
    this.$navigation47All().then((result) => {
      this.checkTemplateIdOption = result.map(item => ({
        label: item.checkTemplateName,
        value: item.id
      }));
    })
  },
  mounted() {
    //高级搜索差几个li
    this.tabsOrTableInit();
    this.initData();//数据初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.SearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  computed: {},
  methods: {
    //审核按钮点击
    toExamineClick(row){
      this.toExamineData.id=row.id;
      this.toExamineData.isDialog = true;
    },
    //审批 取消
    toExamineDataCancel() {
      this.toExamineData = this.$options.data().toExamineData;
    },
    //审批 确定
    toExamineDataDataDetermine() {
      this.$refs['toExamineData'].validate((valid) => {
        if (valid) {
          this.$clientSupplierInfoSaveClientEvaluateCheck(this.toExamineData).then(() => {
            this.$message.success('保持成功');
            this.toExamineDataCancel();
            this.initData();
          })
        }
      });
    },


    //设置审批模板
    setApprovalTemplateClick() {
      //1 客户 2供应商
      this.$configCheckTemplateClientGetConfigCheckTemplateClient({checkTemplateClientType: 2}).then((result) => {
        this.setApprovalTemplateData.checkTemplateId = result.data.id;
        this.setApprovalTemplateData.isDialog = true;
      })
    },
    //设置审批模板 取消
    setApprovalTemplateDataCancel() {
      this.setApprovalTemplateData.isDialog = false;
    },
    //设置审批模板 确定
    setApprovalTemplateDataDetermine() {
      this.$refs['setApprovalTemplateData'].validate((valid) => {
        if (valid) {
          this.$configCheckTemplateClientSave(this.setApprovalTemplateData).then(() => {
            this.$message.success('审批模板设置成功');
            this.setApprovalTemplateDataCancel();
          })
        }
      });
    },
    //初始化
    initData() {
      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        // const form1=new Promise((resolve)=>{
        // this.$().then((result) => {
        //   console.log(result);
        // this.empUnitIdOption = result.map(item => ({
        //  label: item.unitName,
        //  value: item.id
        //  }));
        // resolve()
        // })
        // })
        // variableArray.push(form1)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,
            clientName: encodeURI(this.tabsSearchData.clientName),//企业名称
            clientType: this.tabsSearchData.clientType,//供应商类型
            clientStatus: this.tabsSearchData.clientStatus,//审核状态
          }
          params[`${this.tabsProp.statusField}`] = this.tabsProp.active == 0 ? '' : this.tabsProp.active;
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              if (result.data.length == 0) {
                if (this.paginationProp.currentPage != 1) {
                  this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                  this.initData()
                  return false;
                }
              }
              this.tableData = result.data.map(item => ({
                id: item.id,
                clientName: item.clientSupplierName,//企业名称
                clientType: item.clientSupplierType,//供应商类型
                clientLeader: item.clientSupplierLeader,//负责人
                clientContact: item.clientSupplierContact,//联系方式
                clientQuota: item.clientSupplierQuota,//授信额度
                clientUsedQuota: item.clientSupplierUsedQuota,//已使用额度
                clientUnusedQuota: item.clientSupplierUnusedQuota,//可用额度
                clientStatus: item.clientSupplierStatus,//审核状态
                clientEvaluateType: item.clientSupplierEvaluateType,//是否信用评价
                clientReviewStatus: item.clientReviewStatus,//1 有审核权限
                status: item.status,//状态
                updateBy: item.updateByName,//修改者
                updateTime: item.updateTime,//更新时间
                createBy: item.createByName,//创建者
                createTime: item.createTime,//创建时间
                remark: item.remark,//客户基本情况
              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },
    //table 点击查看
    tableSeeClick(row, key) {
      this.drawerProp.isDrawer = true;
      this.drawerProp.title = '详细信息';
      this.drawerProp.status = 'see';
      this.butStatus = 4;
      if (key !== undefined) {
        this.drawerActiveClick(key)
      }

      this.formData = this.$options.data().formData;
      this.drawerProp.loading = true;
      let params = {
        id: row.id
      }
      this[`$${this.apiProp.tableQuery}`](params).then((result) => {
        this.formData.id = result.data.clientSupplierInfoDto.id;
        this.formData.clientName = result.data.clientSupplierInfoDto.clientSupplierName;//企业名称
        this.formData.clientType = result.data.clientSupplierInfoDto.clientSupplierType;//供应商类型
        this.formData.clientLeader = result.data.clientSupplierInfoDto.clientSupplierLeader;//负责人
        this.formData.clientContact = result.data.clientSupplierInfoDto.clientSupplierContact;//联系方式
        this.formData.clientQuota = result.data.clientSupplierInfoDto.clientSupplierQuota;//授信额度
        this.formData.clientUsedQuota = result.data.clientSupplierInfoDto.clientSupplierUsedQuota;//已使用额度
        this.formData.clientUnusedQuota = result.data.clientSupplierInfoDto.clientSupplierUnusedQuota;//可用额度
        this.formData.clientStatus = result.data.clientSupplierInfoDto.clientSupplierStatus;//审核状态
        this.formData.clientEvaluateType = result.data.clientSupplierInfoDto.clientSupplierEvaluateType;//是否信用评价
        this.formData.status = result.data.clientSupplierInfoDto.status;//状态
        this.formData.updateBy = result.data.clientSupplierInfoDto.updateByName;//修改者
        this.formData.updateTime = result.data.clientSupplierInfoDto.updateTime;//更新时间
        this.formData.createBy = result.data.clientSupplierInfoDto.createByName;//创建者
        this.formData.createTime = result.data.clientSupplierInfoDto.createTime;//创建时间
        this.formData.clientEvaluateTemplateId = result.data.clientSupplierInfoDto.clientSupplierTemplateId;//评价指标模板
        this.formData.remark = result.data.clientSupplierInfoDto.remark;//客户基本情况
        this.formData.configEvaluateTemplateTitleList = result.data.configEvaluateTemplateTitleList;//信用风险评价[]
        this.formData.clientInfoEvaluateResultsDto = result.data.clientInfoEvaluateResultsVo;//评价结果
        this.formData.clientResultsCheckTemplateDto = result.data.clientInfoEvaluateResultsVo.clientInfoEvaluateCheckList;//审批信息
        this.drawerProp.loading = false;
      })
    },
    //全部保持按钮判断
    drawerSubmitForm(status) {
      if (status === 'see') {
        this.drawerProp.status = 'see';
        this.tableSeeClick({id: this.formData.id}, this.drawerProp.active);
        return false
      }
      //新增
      if (this.butStatus == 1) {
        this.addSubmitForm(status);
      }
      //新增信用风险评价
      if (this.butStatus == 2) {
        this.creditRiskAssessmentSub();
      }

      if (this.butStatus == 3) {
        this.evaluationResultsSub();
      }
    },
    //新增信用风险评价
    creditRiskAssessmentSub() {
      this.$refs['drawerFrom1'].validate((valid) => {
        if (valid) {
          let data = {
            id: this.formData.id,
            configEvaluateTemplateTitleList: this.formData.configEvaluateTemplateTitleList,
            templateChooseIdList: []
          }
          for (let i = 0; i < this.formData.configEvaluateTemplateTitleList.length; i++) {
            data.templateChooseIdList.push(this.formData.configEvaluateTemplateTitleList[i].templateChooseId)
          }
          this.$clientSupplierInfoSaveClientEvaluate(data).then(() => {
            this.$message.success('保存成功');
            this.initData();
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }, () => {
            this.drawerProp.loading = false;
          })
        }
      })
    },
    //评价结果保持
    evaluationResultsSub() {
      this.$refs['drawerFrom2'].validate((valid) => {
        if (valid) {
          let data = this.formData.clientInfoEvaluateResultsDto;
          data.id = this.formData.id;
          this.$clientSupplierInfoSaveClientEvaluateResults(data).then(() => {
            this.$message.success('保存成功');
            this.initData();
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }, () => {
            this.drawerProp.loading = false;
          })
        }
      })
    },
    //抽屉 点击保存 和取消
    addSubmitForm(status) {
      //新增不是数组
      let variableArray = [];//变量数组
      variableArray.push('form' + 0);
      variableArray[0] = new Promise((resolve) => {
        this.$refs['drawerFrom0'].validate((valid) => {
          if (valid)
            resolve()
        })
      })
      variableArray.push('form' + 1);
      // variableArray[1] = new Promise((resolve) => {
      //   this.$refs['drawerFrom1'].validate((valid) => {
      //     if (valid)
      //       resolve()
      //   })
      // })
      // variableArray.push('form' + 2);
      // variableArray[2] = new Promise((resolve) => {
      //   this.$refs['drawerFrom2'].validate((valid) => {
      //     if (valid)
      //       resolve()
      //   })
      // })
      // variableArray.push('form' + 3);
      // variableArray[3] = new Promise((resolve) => {
      //   this.$refs['drawerFrom3'].validate((valid) => {
      //     if (valid)
      //       resolve()
      //   })
      // })
      Promise.all(variableArray).then(() => {
        this.drawerProp.loading = true;
        let data = {
          id: this.formData.id,
          clientSupplierName: this.formData.clientName,//企业名称
          clientSupplierType: this.formData.clientType,//供应商类型
          clientSupplierLeader: this.formData.clientLeader,//负责人
          clientSupplierContact: this.formData.clientContact,//联系方式
          clientSupplierQuota: this.formData.clientQuota,//授信额度
          clientSupplierUsedQuota: this.formData.clientUsedQuota,//已使用额度
          clientSupplierUnusedQuota: this.formData.clientUnusedQuota,//可用额度
          clientSupplierStatus: this.formData.clientStatus,//审核状态
          clientSupplierEvaluateType: this.formData.clientEvaluateType,//是否信用评价
          status: this.formData.status,//状态
          updateBy: this.formData.updateBy,//修改者
          updateTime: this.formData.updateTime,//更新时间
          createBy: this.formData.createBy,//创建者
          createTime: this.formData.createTime,//创建时间
          clientTemplateId: this.formData.clientEvaluateTemplateId,//评价指标模板
          remark: this.formData.remark,//客户基本情况
        }
        this[`$${this.apiProp.tableAddEdit}`](data).then(() => {
          this.$message.success('保存成功');
          this.initData();
          if (status === 'add') {
            this.drawerProp.isDrawer = false;
            this.drawerProp.loading = false;
          } else {
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }
        }, () => {
          this.drawerProp.loading = false;
        })
      })
    },
    //抽屉 点击编辑
    drawerEdit(key, handle) {
      console.log(handle);
      this.drawerProp.title = '修改详细信息';
      this.drawerProp.status = 'edit';
      this.butStatus = key + 1;
      //信用风险评价，拉题目
      if (key == 1) {
        this.$navigation1Query({id: this.formData.clientEvaluateTemplateId}).then((result) => {
          this.formData.configEvaluateTemplateTitleList = result.data.configEvaluateTemplateTitleList;
        })
      }
      this.drawerActiveClick(key);
    },
    //title 新增客户 点击
    titleAddClick() {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = false;
      this.drawerProp.title = '新增供应商';
      this.drawerProp.status = 'add';
      this.butStatus = 1;
      this.drawerActiveClick(0);
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //tabs 切换点击
    tabsSwitchClick() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //table 分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //table 分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },
    //table 多选
    tableSelectionChange(val) {
      this.tableProp.tableSelectAll = [];
      for (let i = 0; i < val.length; i++) {
        this.tableProp.tableSelectAll.push(val[i].id)
      }
    },
    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //抽屉左边 点击切换标题
    drawerActiveClick(key) {
      setTimeout(() => {
        let scrollHeight = 0;
        this.drawerLiArray = [];
        for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
          this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
          if (key > i) {
            scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
          }
        }
        this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
        this.drawerProp.active = key;
      }, 300)
    },
    //抽屉右边 监听鼠标滚动
    addWheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.drawerProp.active = i;
            return false;
          }
        }
      }, 300)
    },
    //附件下载
    uploadFileDownload(url, item) {
      //下载不了是跨域的问题
      const URL = url
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', URL, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = item.name
          } else {
            a.setAttribute('download', item.name)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载 开始
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
            'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-download')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0]
          this.cusClickHandler()
        }
      })
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', this.hideCusBtn)
    },
    hideCusBtn(e) {
      let className = e.target.className
      if (className === 'el-icon-download') {
        let imgUrl = document.getElementsByClassName(
            'el-image-viewer__canvas'
        )[0].children[0].src
        this.downloadImage(imgUrl)
      }
    },
    downloadImage(imgUrl) {
      let tmpArr = imgUrl.split('/')
      let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = fileName
          } else {
            a.setAttribute('download', fileName)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载结束
    //table 批量删除
    tableTitleButBatchDel() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
        }
        this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
          this.$message.success('批量删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    },
    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //tabs or table dialog 初始化
    tabsOrTableInit() {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }

        this.toConfigureFieldDialog.isDialog = false;
        this.toConfigureFieldDialog.loading = false;
        let tabsFieldPropNum = 0; //有几个li
        for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {

          for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
            if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
              tabsFieldPropNum++
            }
          }
        }
        if (this.$refs.commonTabsFrom) {
          let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
          this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
        }
      })
    },
    //tabs or table dialog 点击搜索
    tabsOrTableSearch(search) {
      if (search) {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          let oneShow = false;//第一层是否显示
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
              oneShow = true;
            } else {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
            }
          }
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
        }
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
          }
        }
      }
    },
    //tabs or table dialog 拖动点击删除
    tabsOrTableClose(item, key) {
      this.toConfigureFieldDialog.draggableProp.splice(key, 1);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
          }
        }
      }
    },
    //tabs or table dialog 清空以前的设置
    tabsOrTableDialogEmpty() {
      this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          tableId: this.apiProp.tabsOrTableId,
          data: null
        }
        this.$commonApi(data).then(() => {
          this.$message.success('清空设置成功');
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        })
      }).catch(() => {
        this.$message.info('已取消清空设置');
      });
    },
    //tabs or table dialog 还原初始化
    tabsOrTableDialogReductionInit(status) {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.isDialog = true;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs or table dialog 点击 关闭 取消
    tabsOrTableCancel() {
      this.tabsOrTableInit();
    },
    //tabs or table dialog 点击确定
    tabsOrTableDetermine() {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.search = '';
      this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
            if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
            }
          }
        }
      }
      let data = {
        tableId: this.apiProp.tabsOrTableId,
        data: JSON.stringify(this.toConfigureFieldDialog)
      }
      this.$commonApi(data).then(() => {
        this.$message.success('保存成功');
        this.tabsOrTableInit();
        this.tabsSearchData = this.$options.data().tabsSearchData;
        this.initData();
      })
    },
    //tabs or table dialog 点击选择
    tabsOrTableChecked(item) {
      if (item.checkbox) {
        this.toConfigureFieldDialog.draggableProp.push(item)
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
          if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
            this.toConfigureFieldDialog.draggableProp.splice(i, 1);
          }
        }
      }
      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
    },
    //tabs table 设置图标和按钮 dialog拖拽
    tabsOrTableSetClick(status, title) {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.isDialog = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data)
        }
        this.toConfigureFieldDialog.title = title;
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        //排序
        this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
          return p1.order - p2.order
        })
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs 高级搜索 重置按钮
  },
};
</script>
<style lang="scss" scoped>
//信用评价 增加
.creditRiskAssessment-css-content {
  margin-top: 15px;

  .title {
    font-size: 14px;
    font-weight: bold;
  }

  ::v-deep .el-form-item {
    margin-bottom: 0;
  }

  .el-radio {
    width: 100%;
    white-space: normal;
    padding-top: 15px;
    text-indent: 1em;

    ::v-deep .el-radio__label {
      padding-left: 0;
    }
  }

  .el-textarea {
    margin-top: 15px;
  }

}
</style>
